<template>
	<view class="cardbox">

		<view class="title" style="flex:1 ;display: flex;">
			<view>
				<image :src="showImage" v-if="mode==2" @error="handleImageException()"></image>
			</view>
			<view>
				<text v-if="mode==3" style="color: #aaa;">{{title}}</text>
				<text v-else>{{title}}</text>
			</view>
		</view>
		<view class="adbox" v-if="mode==3" style="margin-top: 5rpx;">
			<view v-for="(item,index) in images">
				<image :src="item" mode="aspectFill" @error="handleImageError(index)"></image>
			</view>
		</view>
		<view class="tips">
			<text v-if="isTop" class="tips" style="color: red;">置顶</text>
			<text class="tips">{{author}}</text>
			<text class="tips">{{comments}}评</text>
			<view class="tips" style="flex:1;display: flex;justify-content: flex-end;">
				<text>{{timedata}}</text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "NewCardView",
		data() {
			return {
				defaultPic: "/static/a/default.png",
				failPic: "/static/a/fail.png",
				status: 'news',
				imageError:false
			};
		},
		computed: {
			showImage() {
				if (this.images[0]) {
					if (this.imageError) {
						console.log("showImage Error--> " + this.title);
					}
					return this.imageError ? this.failPic : this.images[0]
				} else {
					console.log("showImage Default--> " + this.title);
					return this.defaultPic
				}
			
			},
			authorColor() {
					const colorMap = {
						news: '#aaa',
						ad: '#00f'
					}
					return {
						color: colorMap[this.status] || '#f33'
					}
				}
			},
			mounted() {
				 console.log("NewsCardView--------mounted " + this.title);
				if (this.mode == 3) {
					this.status = "ad"
				}
			},
			props: {
				title: {
					type: String,
					default: "新闻标题",
					require: true
				},
				isTop: {
					type: Boolean,
					default: false,
					require: true
				},
				author: {
					type: String,
					default: "来源",
					require: true
				},
				comments: {
					type: Number,
					default: 0,
					require: true
				},
				timedata: {
					type: String,
					default: "2000.1.1",
					require: true
				},
				mode: {
					type: Number,
					default: 1,
					require: true
				},
				images: {
					type: Array,
					default: () => []
				}
			},
			methods: {
				handleImageException() {
					// // 当图片加载失败时，将显示地址改为默认图片
					console.log("handleImageException " + this.title);
					this.imageError = true;
				},
				handleImageError(index) {
					// // 当图片加载失败时，将显示地址改为默认图片
					console.log("handleImageError----->:" + this.title);
					console.log("handleImageError----->index:" + index);

					this.$set(this.images, index, this.failPic);
				}

			}
	}
</script>

<style>
	image{
	margin-right: 10px;
	width: 100px;
	height: 70px;
	border-radius: 10rpx;	
	}
	.adbox {
		display: flex;
		flex-direction: row;
		justify-content: space-around
	}
	.cardbox {
		background-color: #fff;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

		margin: 20rpx;
		border-radius: 10rpx;
	}

	.title {
		font-size: 35rpx;
		padding: 10rpx;
	}

	.tips {
		color: #717171;
		padding: 10rpx;
		margin-right: 10rpx;
		display: flex;
		flex-direction: row;
	}
</style>